<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员注册</title>
    <style>
        #app {
            position: absolute;
            width: 500px;
            height: 550px;
            left: 50%;
            margin-left: -250px;
            margin-top: 50px;
            padding: 50px;
        }
        body {
            /* 优化后的背景图设置 */
            background-image: url("image/background2.jpeg");
            background-size: cover; /* 覆盖整个容器 */
            background-position: center center; /* 居中显示 */
            background-attachment: fixed; /* 背景固定 */
            min-height: 100vh; /* 占满视口高度 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f2f5;
        }
        .el-row {
            text-align: center;
        }
        .el-form-item label {
            color: black;
        }
        .el-form-item .el-input__inner {
            color: black;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 style="text-align: center;margin-bottom: 50px;">注册界面</h1>
    <el-form :model="manager" :rules="rules" ref="manager" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名：" prop="managerAcc">
            <el-input v-model="manager.managerAcc"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="managerPwd">
            <el-input type="password" v-model="manager.managerPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="manager.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="managerPhone">
            <el-input v-model.number="manager.managerPhone"></el-input>
        </el-form-item>
        <el-row align="center">
            <el-button type="primary" style="width: 100px;" @click="add">注册</el-button>
            <el-button type="primary" style="width: 100px;" @click="over">返回</el-button>
        </el-row>
    </el-form>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                manager: {
                    managerAcc: '',
                    managerPwd: '',
                    checkPass: '',
                    managerPhone: '',
                },
                rules: {
                    managerAcc: [
                        { validator: this.validateUserAccount, trigger: 'blur' }
                    ],
                    managerPwd: [
                        { validator: this.validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: this.validatePass2, trigger: 'blur' }
                    ],
                    managerPhone: [
                        { validator: this.number, trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            validateUserAccount(rule, value, callback) {
                if (!value) {
                    callback(new Error('请输入账号'));
                } else {
                    axios.get('/manager/managercount', { params: { managerAcc: value } })
                        .then(resp => {
                                if (resp.data.data == 0) {
                                    callback(); // 账号可用
                                } else {
                                    callback(new Error('账号已存在')); // 账号已存在
                                }
                        })
                }
            },
            number(rule, value, callback) {
                if (value === '') {
                    callback(new Error('请输入手机号'));
                } else {
                    const phoneRegex = /^1\d{10}$/;
                    if (!phoneRegex.test(value)) {
                        callback(new Error('手机号必须为11位数字'));
                    } else {
                        callback();
                    }
                }
            },
            validatePass(rule, value, callback) {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.manager.checkPass !== '') {
                        this.validatePass2(rule, this.manager.checkPass, callback);
                    }
                    callback();
                }
            },
            validatePass2(rule, value, callback) {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.manager.managerPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            },
            add() {
                this.$refs.manager.validate((valid) => {
                    if (valid) {
                        axios.post('/manager', this.manager)
                            .then((resp) => {
                                console.log('Response from server:', resp);
                                this.resetForm();
                                this.$message({
                                    type: 'success',
                                    message: resp.data.msg
                                });
                            })
                            .catch((error) => {
                                console.error('Error getting data from server:', error);
                                this.resetForm();
                                this.$message({
                                    type: 'error',
                                    message: error.response ? error.response.data.msg : '注册失败'
                                });
                            });
                    } else {
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.manager.resetFields();
            },
            over() {
                window.location.href = "/login.html";
            }
        }
    });
</script>
</body>
</html>